<template>
    <div>
        <!-- watch监听器 -->
        <p @click="count++">count:{{ count }}</p>

        <!-- 实现监听姓名的变化 -->
        <p>
            <input type="text" v-model="firstname" placeholder="姓">
        </p>
        <p>
            <input type="text" v-model="lastname" placeholder="名">
        </p>
        <p>
            <input type="text" v-model='fullname'>
        </p>
    </div>
</template>

<script>
// watch:
// 定义: watch 侦听器可以侦听this 实例上任意的属性值的变化,
// 还可以侦听 路由的变化
// 语法:
//watch:{ 要侦听的数据(newvalue,;oldvalue){}}

export default {
    data() {
        return {
            count: 100,
            firstname: '',
            lastname: '',
            fullname: ''
        }
    },
    watch: { // 设置当前组件的侦听器的
        count(newvalue, oldvalue) {
            console.log(newvalue, oldvalue);
        },
        firstname(newvalue, oldvalue) {
            // console.log(newvalue, oldvalue);
            // console.log('this', this); // 指向当前组件实例
            this.fullname = newvalue + this.lastname
        },
        lastname: function (newvalue, oldvalue) {
            // console.log(newvalue, oldvalue);
            this.fullname = this.firstname + newvalue
        },

        // fullname(newvalue) {
        //     console.log(newvalue);
        //     this.firstname = newvalue.substr(0, 1)
        //     this.lastname = newvalue.substr(1)
        // }

    }
}
</script>
<style scoped></style>